<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/tags/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>croppic</title>
    <!-- 图片裁剪 -->
    <link rel="shortcut icon" href="${ctx}/static/demo/croppic/assets/img/favicon.png">
    <!-- Bootstrap core CSS -->
    <link href="${ctx}/static/demo/croppic/assets/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="${ctx}/static/demo/croppic/assets/css/main.css" rel="stylesheet">
    <link href="${ctx}/static/demo/croppic/assets/css/croppic.css" rel="stylesheet">
    <!-- Fonts from Google Fonts -->
    <%--<link href='http://fonts.googleapis.com/css?family=Lato:300,400,900' rel='stylesheet' type='text/css'>--%>
    <%--<link href='http://fonts.googleapis.com/css?family=Mrs+Sheppards&subset=latin,latin-ext' rel='stylesheet' type='text/css'>--%>
    <%--<script type="text/javascript" src="${ctx}/static/jquery/jquery-1.9.1.min.js"></script>--%>
    <%--<script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-10627690-5', 'auto');
        ga('send', 'pageview');

    </script>--%>
    <script type="text/javascript"></script>
</head>
<body>
<div id="headerwrap">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <span class="logoHeader">croppic</span>
                <h2>is an image cropping jquery plugin that will satisfy your needs and much more</h2>
                <a href="#" class="downloadButton" >download <sup>v1.0.1</sup></a>
            </div><!-- /col-lg-6 -->
            <div class="col-lg-6 cropHeaderWrapper">
                <div id="croppic"></div>
                <span class="btn" id="cropContainerHeaderButton">click here to try it</span>
            </div><!-- /col-lg-6 -->
        </div><!-- /row -->
    </div><!-- /container -->
</div><!-- /headerwrap -->

<div class="container">
    <div class="row mt ">
        <div class="col-lg-4 ">
            <h4 class="centered"> MODAL </h4>
            <p class="centered">( open in modal window )</p>
            <div id="cropContainerModal"></div>
        </div>

        <div class="col-lg-4 ">
            <h4 class="centered"> OUTPUT </h4>
            <p class="centered">( display url after cropping )</p>
            <div id="cropContaineroutput"></div>
            <input type="text" id="cropOutput" style="width:100%; padding:5px 4%; margin:20px auto; display:block; border: 1px solid #CCC;" />
        </div>

        <div class="col-lg-4 ">
            <h4 class="centered"> EYECANDY </h4>
            <p class="centered">( no background image )</p>
            <div id="cropContainerEyecandy"></div>
        </div>
    </div>
    <div class="row mt ">
        <div class="col-lg-4 ">
            <h4 class="centered"> Minimal Controls </h4>
            <p class="centered">( define the controls available )</p>
            <div id="cropContainerMinimal"></div>
        </div>
        <div class="col-lg-4 ">
            <h4 class="centered"> Preload </h4>
            <p class="centered">( if the picture is already available )</p>
            <div id="cropContainerPreload"></div>
        </div>
        <div class="col-lg-4 ">
            <div id="cropContainerPlaceHolder2"></div>
        </div>
    </div>
</div>




<script type="text/javascript" src="${ctx}/static/jquery/jquery-1.9.1.min.js"></script>
<%--<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>--%>

<script src="${ctx}/static/demo/croppic/assets/js/bootstrap.min.js"></script>
<script src="${ctx}/static/demo/croppic/assets/js/jquery.mousewheel.min.js"></script>
<script src="${ctx}/static/demo/croppic/croppic.min.js"></script>
<script src="${ctx}/static/demo/croppic/assets/js/main.js"></script>
<script>
    var croppicHeaderOptions = {
        //uploadUrl:'${ctx}/static/demo/croppic/img_save_to_file.php',   //上传后台连接
        /*uploadData:{     // 传给后台的参数
            "dummyData":1,
            "dummyData2":"text"
        }*/
        cropData:{   // 传给后台的参数
            "dummyData":1,
            "dummyData2":"asdas"
        },
//        loadPicture: '',   // 载入已经存在的图片
        zoomFactor:10,   //  doubleZoomControls 增加10×zoomFactor放大两个额外的缩放控件（默认为true）
        doubleZoomControls:true, //zoomFactor 缩放图像的像素的值（默认为10）
        rotateFactor:10,  //rotateControls 添加两个额外的旋转控制左、右旋转（默认为true）
        rotateControls:true, //rotateFactor 旋转图像的值（默认为5）
//        outputUrlId:'', //  成功的图像裁剪裁剪后，在页面上显示处理过后的Image图片的URL，通过设置一个ID找到页面上的输入框
//        customUploadButtonId:'myDivId', 如果你想自定义上传裁切图片的按钮，你可以设置这个参数，传递一个按钮的ID

        imgEyecandy:true,  // 透明图像显示当前IMG变焦，提示：为了防止布局打破，需要给父级裁切的DIV盒子设置 overflow:hidden
        imgEyecandyOpacity:0.2,


        cropUrl:'${ctx}/static/demo/croppic/img_crop_to_file.php',
        customUploadButtonId:'cropContainerHeaderButton',
        modal:false,  // 如果你想在模态窗口中打开裁剪（默认是false）
        processInline:true, //如果你想在JavaScript处理初始FileUpload（有）而不是在服务器端（默认为false），不是所有的浏览器支持的API的例子有：IE10 +支持
        loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ', //果你想在模态窗口中打开裁剪（默认是false），包裹的DIV的类必须设置为“LOADER”
        onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
        onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
        onImgDrag: function(){ console.log('onImgDrag') },
        onImgZoom: function(){ console.log('onImgZoom') },
        onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
        onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
        onReset:function(){ console.log('onReset') },
        onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    var croppic = new Croppic('croppic', croppicHeaderOptions);


    var croppicContainerModalOptions = {
        uploadUrl:'${ctx}/static/demo/croppic/img_save_to_file.php',
        cropUrl:'${ctx}/static/demo/croppic/img_crop_to_file.php',
        modal:true,
        imgEyecandyOpacity:0.4,
        loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
        onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
        onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
        onImgDrag: function(){ console.log('onImgDrag') },
        onImgZoom: function(){ console.log('onImgZoom') },
        onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
        onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
        onReset:function(){ console.log('onReset') },
        onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    var cropContainerModal = new Croppic('cropContainerModal', croppicContainerModalOptions);


    var croppicContaineroutputOptions = {
        <%--uploadUrl:'${ctx}/static/demo/croppic/img_save_to_file.php',--%>
        cropUrl:'${ctx}/static/demo/croppic/img_crop_to_file.php',
        outputUrlId:'cropOutput',
        modal:false,
        loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
        onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
        onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
        onImgDrag: function(){ console.log('onImgDrag') },
        onImgZoom: function(){ console.log('onImgZoom') },
        onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
        onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
        onReset:function(){ console.log('onReset') },
        onError:function(errormessage){ console.log('onError:'+errormessage) }
    }

    var cropContaineroutput = new Croppic('cropContaineroutput', croppicContaineroutputOptions);

    var croppicContainerEyecandyOptions = {
        uploadUrl:'${ctx}/static/demo/croppic/img_save_to_file.php',
        cropUrl:'${ctx}/static/demo/croppic/img_crop_to_file.php',
        imgEyecandy:false,
        loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
        onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
        onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
        onImgDrag: function(){ console.log('onImgDrag') },
        onImgZoom: function(){ console.log('onImgZoom') },
        onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
        onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
        onReset:function(){ console.log('onReset') },
        onError:function(errormessage){ console.log('onError:'+errormessage) }
    }

    var cropContainerEyecandy = new Croppic('cropContainerEyecandy', croppicContainerEyecandyOptions);

    var croppicContaineroutputMinimal = {
        uploadUrl:'${ctx}/static/demo/croppic/img_save_to_file.php',
        cropUrl:'${ctx}/static/demo/croppic/img_crop_to_file.php',
        modal:false,
        doubleZoomControls:false,
        rotateControls: false,
        loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
        onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
        onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
        onImgDrag: function(){ console.log('onImgDrag') },
        onImgZoom: function(){ console.log('onImgZoom') },
        onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
        onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
        onReset:function(){ console.log('onReset') },
        onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    var cropContaineroutput = new Croppic('cropContainerMinimal', croppicContaineroutputMinimal);

    var croppicContainerPreloadOptions = {
        uploadUrl:'${ctx}/static/demo/croppic/img_save_to_file.php',
        cropUrl:'${ctx}/static/demo/croppic/img_crop_to_file.php',
        loadPicture:'${ctx}/static/demo/croppic/assets/img/night.jpg',
        enableMousescroll:true,
        loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
        onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
        onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
        onImgDrag: function(){ console.log('onImgDrag') },
        onImgZoom: function(){ console.log('onImgZoom') },
        onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
        onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
        onReset:function(){ console.log('onReset') },
        onError:function(errormessage){ console.log('onError:'+errormessage) }
    }
    var cropContainerPreload = new Croppic('cropContainerPreload', croppicContainerPreloadOptions);


</script>
</body>
</html>

